<template>
    <div>
        <h2>显示</h2>
        <table>
            <tr>
                <td>
                    优惠类型<select v-model="start.leixing">
                        <option value="">请选择</option>
                        <option>7折优惠</option>
                        <option>打骨折</option>
                        <option>优惠个蛋</option>
                    </select>
                    优惠标题<input type="text" v-model="start.biaoti">
                    <button @click="getshow">查询</button>
                    <button @click="Add">添加</button>
                </td>
            </tr>
        </table>
        <table class="table table-bordered">
            <tbody >
                <tr class="bg bg-primary">
                    <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                    <td>类型</td>
                    <td>标题</td>
                    <td>图片</td>
                    <td>地址</td>
                    <td>须知</td>
                    <td>手机号</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in showyou" :key="item.id">
                    <td>  <input type="checkbox" v-model="ids" @change="checkOne" :value="item.id"></td>
                    <td>{{item.leixing}}</td>
                    <td>{{item.biaoti}}</td>
                    <td><img :src="item.tupian" style="display: '';max-width: 100px;"></td>
                    <td>{{item.adder}}</td>
                    <td>{{item.xuzhi}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.start}}</td>
                    <td>
                        <a @click="deyou(item.id)">删除</a>
                        <a @click="update(item.id)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td>
                    <a @click="show('a')">上一页</a>
                    <a @click="show('b')">下一页</a>
                    <a @click="show('c')">首页</a>
                    <a @click="show('d')">尾页</a>
                    共{{ count }}条，当前{{ start.index }}/{{ sum }}页，共{{ sum }}页，每页{{ start.size }}条
               
                </td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted, toRefs } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";


let checked = ref(false);
let ids = ref([]);

const router = useRouter();
const showyou=ref([])
const form:any=reactive({
    start:{
        leixing:"",
        biaoti:"",
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})
const {start,list,count,sum}=toRefs(form);
const getshow=()=>{
    let obj={
        leixing:start.value.leixing,
        biaoti:start.value.biaoti,
        index:start.value.index,
        size:start.value.size,
    }
    axios.get("https://localhost:7015/api/youhui/Showyouhui?leixing="+obj.leixing+"&biaoti="+obj.biaoti+"&index="+obj.index+"&size="+obj.size).then(res=>{
        showyou.value=res.data.data;
        count.value=res.data.count;
        sum.value=res.data.sum;
    })
}
const show=(e:any)=>{
    switch(e){
        case 'a':
            if(start.value.index==1){
                alert("已经是第一页了")
                return;
            }
           start.value.index-=1;
           break;
        case 'b':
            if(start.value.index==sum.value){
                alert("已经是最后一页了");
                return;
            }
            start.value.index+=1;
            break;
        case 'c':
            if(start.value.index==1){
                alert("已经是首页了");
                return;
            }
            start.value.index=1;
            break;
        case 'd':
            if(start.value.index==sum.value){
                alert("已经是尾页了")
                return;
            }
            start.value.index=sum.value;
            break;

    }
    getshow();
}

const deyou=(id:number)=>{
    if(confirm("确认删除吗")){
    axios.delete("https://localhost:7015/api/youhui/delyou?id="+id).then(res=>{
      
        
            if(res.data>0){
                alert("删除成功");
                getshow();
            }
            else{
                alert("删除失败");
             
            }
        
    })
    }
}

const checkAll = (e:any)=>{
    checked.value=!checked.value;
    if(checked.value==true){
        ids.value=showyou.map(item=>{
            return item.id
        })
    }
    else{
        ids.value=[]
    }
}
const checkOne = (e:any)=>{
    if(data.List.length==ids.value.length){
        checked.value=true;
    }else{
        checked.value=false;
    }
}




const update=(id:number)=>{
    router.push("upyou?id="+id);
}

const Add=()=>{
    router.push("addyou");
}

onMounted(() => {
    getshow();
})
</script>

<style scoped>

</style>